import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Layout, Menu, theme } from 'antd';
import { NavLink, Outlet } from "react-router-dom"
import { renderChildren } from '@/router/RouterConfig';

const { Header, Content, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  path: any,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label: <NavLink to={path}>{label}</NavLink>
  } as MenuItem;
}

const renderRouter = (arr: any) => {
  let newArr: any = []
  arr?.forEach((item: any, index: number) => {
    newArr.push(getItem(item.title, item.path, index, item.icon))
  })
  return newArr;
}



const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} style={{ position: 'absolute', top: '60px', left: '0', height: '90vh' }}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['0']} mode="inline" items={renderRouter(renderChildren)} />
      </Sider>
      <Layout>
        <Header style={{ width: '98vw', background: '#001529' }} >
          <h1 style={{ color: '#fff' }}>宏烨找房后台管理系统</h1>
        </Header>
        <Content style={{ zIndex: '66', width: '80%', margin: '0 220px' }}>
          <div
            style={{
              padding: 24,
              minHeight: 500,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout >
  );
};

export default App;